<template>
  <g-table-page
    :store-model-name="storeModelName"
    add-btn-link="/system/backMenu/add"
    add-btn-link-text="添加后台菜单"
    :selection="false"
    :table-operation="tableOperation"
  >
    <!-- 根据tableHeadList slotName字端 动态插入 插槽 -->
    <template v-for="item in tableHeadListSlotName" :key="item.slotName" #[item.slotName]="{ row }">
      <div v-if="row">
        <span v-if="item.prop == 'path'" :class="row[item.prop].lastIndexOf('/') > 0 ? 'text-blue-600' : 'text-green-400'">
          {{ row[item.prop] }}
        </span>
        <span v-if="item.prop == 'type'">
          <el-tag v-if="row[item.prop] == 1" class="ml-2">菜单</el-tag>
          <el-tag v-if="row[item.prop] == 2" class="ml-2" type="success">权限</el-tag>
        </span>
        <span v-if="item.prop == 'status'">
          <el-tag v-if="row[item.prop] == 1" class="ml-2" type="success">有效</el-tag>
          <el-tag v-else class="ml-2" type="danger">无效</el-tag>
        </span>
      </div>
    </template>
  </g-table-page>
</template>

<script setup lang="ts">
import { computed, toRefs, ref } from 'vue'
import type { TableHeadList } from '@/types/storeModule'
import router from '@/router'
import store from '@/store'
import { updateBackMenuApi } from '@/api/system'
import { ElMessage } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'

const storeModelName = 'backMenuModule'
const tableOperation = {
  width: 100,
  fixed: 'right',
  buttonGroups: [
    ({ row }) => {
      return {
        name: '编辑',
        isShow: true,
        disabled: row.status != 1 ? true : false,
        click: ({ row }) => {
          router.push({
            path: '/system/backMenu/edit',
            query: { id: row.menuId, childrenList: row.childrenList }
          })
        }
      }
    },
    ({ row }) => {
      return {
        name: row.status == 1 ? '删除' : '恢复',
        type: row.status == 1 ? 'danger' : 'success',
        isShow: true,
        click: ({ row }) => {
          // loading(true)
          updateBackMenuApi({ menuId: row.menuId, status: row.status == 1 ? 0 : 1 }).then((res) => {
            if(res * 1 === 200){
              ElMessage.success(row.status == 1 ? '删除成功' : '恢复成功')
              setTimeout(() => {
                store.dispatch('data/getTableData', storeModelName)
                // router.go(0);
              }, 100)
            }
          })
        }
      }
    }
  ]
}

const tableHeadListSlotName = computed(() => {
  const tableHeadList = store.state[storeModelName].tableHeadList
  return tableHeadList.filter((item: TableHeadList) => item.slotName)
})
</script>
